<template>
  <div class="pay-page">
    <div class="goods-quyi">
      <div class="g-title">《{{goodsTitle}}》</div>
      <div class="goods-interests" v-if="goodsType == 'vip1'">
        <p><span>特权1</span>：正式成绩公布后，即享一二三段志愿查询服务。</p>
        <p><span>特权2</span>：VIP用户可享受志愿填报相关问题专业咨询。</p>
        <p><span>特权3</span>：免费领取联通新卡，即可获赠100元话费及志愿填报服务。</p>
        <!-- <p><span>特权1</span>：尊享金榜题名志愿查询系统、院校招生计划、高一选课查询等一年期服务。</p>
        <p><span>特权2</span>：免费领取联通卡，联通卡在2019年元旦后依据购买顺序陆续办理。</p>
        <p><span>特权3</span>：高考录取结束后，凭录取通知书更有额外的全国流量免费送。</p> -->
      </div>
      <div class="goods-interests" v-else-if="goodsType == 'vip3'">
        <p><span>特权1</span>：尊享金榜题名志愿查询系统、院校招生计划、高一选课查询等三年期服务。</p>
        <p><span>特权2</span>：免费领取联通卡，联通卡在2019年元旦后依据购买顺序陆续办理。</p>
        <!-- <p><span>特权3</span>：高考录取结束后，凭录取通知书更有额外的全国流量免费送。</p> -->
      </div>
      <div class="goods-interests" v-else-if="goodsType == 'woo'">
        <p><span>特权1</span>：联通卡在2019年元旦后依据购买顺序陆续办理。</p>
        <p><span>特权2</span>：尊享金榜题名志愿查询系统、院校招生计划、高一选课查询等一年期服务。</p>
        <!-- <p><span>特权3</span>：高考录取结束后，凭录取通知书更有额外的全国流量免费送。</p> -->
      </div>
      <div class="goods-interests" v-else-if="goodsType == 'report'">
        <p><span>特权1</span>：尊享金榜题名平台志愿智能辅助报告系统在高考志愿填报期间内无数次使用权。</p>
        <p><span>特权2</span>：免费享受金榜题名志愿查询系统、院校招生计划、高一选课查询等一年期服务。</p>
        <p><span>特权3</span>：免费领取联通卡，联通卡在2019年元旦后依据购买顺序陆续办理。</p>
        <!-- <p><span>特权4</span>：高考录取结束后，凭录取通知书更有额外的全国流量免费送。</p> -->
      </div>
    </div>
    <div class="goods-wrap">
      <div class="g-title">请选择您需要购买的套餐</div>
      <div class="g-tip" v-if="gType == 'report' && hasBuyReport">您已经购买，无需重复购买</div>
      <div class="g-tip" v-else-if="gType != 'report' && hasBuyVip">您已经购买，无需重复购买</div>
      <div class="g-tip" v-else>购买成功后，在联通卡送达之前，原有手机号可作为金榜题名系统VIP账号使用，联通卡送达后，请使用联通卡登入系统，原有手机号将在两周后停止使用。</div>
      <ul class="goods-list">
        <li v-for="(item, idx) in goodsList" :key="idx" :class="[{'active': item.active}, 'item'+item.id]" @click="selGoods(idx, item.id)">
          <div class="g-img"></div>
          <div class="g-txt">{{ item.txt }}</div>
          <div class="g-price">￥{{ item.price/100 }} <span class="g-validity">({{ item.validity }})</span></div>
          <i class="g-state iconfont icon-success_fill" v-if="goodsIdx == idx"></i>
          <span class="g-num">{{ idx + 1 }}</span>
        </li>
      </ul>
    </div>
    <div class="payment-wrap">
      <div class="g-title">请选择支付方式</div>
      <ul class="payment-list">
        <li @click="pay('alipay')" v-if="!isWeiXin">
          <img src="@/assets/images/i_pay_a.png" class="p-img">
          <div class="p-txt">支付宝</div>
        </li>
        <li @click="pay('wxpay')">
          <img src="@/assets/images/i_pay_w.png" class="p-img">
          <div class="p-txt">微&nbsp;&nbsp;&nbsp;&nbsp;信</div>
        </li>
      </ul>
    </div>
    <div class="payment-wrap btn-next-group">
      <a href="javascript:;" class="btn-gohome btn-next" @click="goHome()">暂不购买</a>
    </div>
    <div v-transfer-dom>
      <confirm v-model="buyConfirmShow" class="c-confirm" :show-cancel-button="false" @on-confirm="onBuyConfirm">
        <p style="text-align:center;">您已经购买，无需重复购买</p>
      </confirm>
    </div>
  </div>
</template>

<script>
import Api from '@/api/index.js'
import Utils from '@/common/utils.js'
import { Confirm, TransferDomDirective as TransferDom } from 'vux'
export default {
  directives: {
    TransferDom
  },
  components: {
    Confirm
  },
  data() {
    return {
      goodsList: [
        {
          id: 116,
          txt: '高考志愿查询(高三)',
          price: 9900,
          active: 1,
          validity: '1年有效期'
        },
        // {
        //   id: 115,
        //   txt: '2年有效期  适用于高二学生',
        //   price: 39900,
        //   active: 1
        // },
        {
          id: 114,
          txt: '高考志愿生涯(选课、志愿查询等)',
          price: 19900,
          active: 1,
          validity: '3年有效期'
        }
      ],
      goodsIdx: 0,
      orderType: 116,
      userData: null,
      userType: null,
      orderId: null,
      alipayForm: null,
      isWeiXin: null,
      code: null,
      hasBuyVip: 0,
      hasBuyReport: 0,
      applyCardType: 0,  // 0 不需要办卡  1办卡
      buyConfirmShow: false,
      queryStr: null,
      goodsType: 'vip1',
      goodsTitle: '金榜题名志愿查询系统VIP特权',
      gType: null
    }
  },
  created() {
    this.isWeiXin = Utils.isWxBrowser()
    this.queryStr = this.$route.query
    let queryStr = this.queryStr
    this.userData = Utils.local('userData')
    // this.userType = Utils.session('userType')
    this.gType = queryStr && queryStr.t ? queryStr.t : ''
    // let gType = this.gType
    if (this.isWeiXin && !queryStr.code && !this.userData.openid) {
      window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxe5950dd78881d19b&redirect_uri=https%3a%2f%2fmzy.86edu.net%2fgoods%3flg%3d1%26t%3d${this.gType}&response_type=code&scope=snsapi_base&state=123&connect_redirect=1#wechat_redirect`
    } else if (this.isWeiXin && queryStr.code) {
      this.code = queryStr.code
    }
    this.applyCardType = 0
    // 体验用户不用给出提示
    this.hasBuyVip = this.userData.type === 102 || this.userData.type === 101 ? 0 : this.userData.isCommonPay
    if (this.gType == 'banner') {
      this.goodsList = [{
        id: 116,
        txt: '高考志愿查询(高三)',
        price: 9900,
        active: 1,
        validity: '1年有效期'
      }]
      this.orderType = 116
    }
    else if (this.gType === 'report') {
      this.goodsType = 'report'
      this.goodsTitle = '金榜题名志愿智能辅助报告特权'
      this.goodsList = [{
        id: 113,
        txt: '志愿智能辅助报告系统',
        price: 29900,
        active: 1,
        validity: '1年有效期'
      }]
      this.orderType = 113
      this.hasBuyReport = this.userData.type === 102 || this.userData.type === 101 ? 0 : this.userData.isReportPay
    } else if (this.userData && this.userData.studentClass === 3 && !this.userData.isReportPay) {
      this.goodsList.push({
        id: 113,
        txt: '志愿智能辅助报告系统',
        price: 29900,
        active: 1,
        validity: '1年有效期'
      })
      this.hasBuyReport = this.userData.type === 102 || this.userData.type === 101 ? 0 : this.userData.isReportPay
    } else if (this.gType === 'all') {
      this.goodsList.push({
        id: 113,
        txt: '志愿智能辅助报告系统',
        price: 29900,
        active: 1,
        validity: '1年有效期'
      })
      this.hasBuyReport = this.userData.type === 102 || this.userData.type === 101 ? 0 : this.userData.isReportPay
    } else if (this.gType === 'woo') {
      this.applyCardType = 1
      this.goodsType = 'woo'
      this.goodsTitle = '金榜题名联通卡礼包特权'
      this.goodsList = [{
        id: 199,
        txt: '金榜题名联通卡大礼包',
        price: 9900,
        active: 1,
        validity: '1年有效期'
      }]
    }

    // this.hasBuyVip = 1
    // this.hasBuyReport = 1
    if (this.hasBuyVip || this.hasBuyReport) {
      this.goodsIdx = -1
      this.goodsList.map((item, idx) => {
        if ((this.gType === 'report' && this.hasBuyReport) || (this.gType !== 'report' && this.hasBuyVip)) {
          item.active = 0
        }
        return item
      })
    }
  },
  methods: {
    goHome() {
      this.$router.push({ name: 'home' })
    },
    selGoods(idx, oType) {
      if (oType === 114) {
        this.goodsType = 'vip3'
        this.goodsTitle = '金榜题名高考生涯规划VIP特权'
      } else if (oType === 116) {
        this.goodsType = 'vip1'
        this.goodsTitle = '金榜题名志愿查询系统VIP特权'
      } else if (oType === 113) {
        this.goodsType = 'report'
        this.goodsTitle = '金榜题名志愿智能辅助报告特权'
      } else if (oType === 199) {
        this.goodsType = 'woo'
        this.goodsTitle = '金榜题名联通卡礼包特权'
      }
      if (this.hasBuyVip || this.hasBuyReport) {
        this.$vux.toast.show({
          text: '您已经购买，无需重复购买',
          type: 'text',
          width: '80%'
        })
      } else {
        this.goodsList.map((item, idx) => {
          item.active = 0
          if (item.id === oType) {
            item.active = 1
          }
          return item
        })
        this.goodsIdx = idx
        this.orderType = oType
      }
    },
    pay(type) {
      let that = this
      if (this.userData.isCommonPay && ([114, 115, 116].indexOf(this.orderType) >= 0)) {
        this.buyConfirmShow = true
      } else if (this.userData.isReportPay && this.orderType === 113) {
        this.buyConfirmShow = true
      } else {
        Api.saveOrder({ type: that.orderType, applyCardType: that.applyCardType }).then(res => {
          if (res.code === 20000) {
            that.orderId = res.data.orderId
            if (type === 'alipay') {
              that.alipay(that.orderId)
            } else {
              if (this.isWeiXin) {
                that.wxpay(that.orderId)
              } else {
                that.wxpayH5(that.orderId)
              }
            }
          } else {
            // that.$router.push({name: 'payState', query: {state: 0}})
          }
        })
      }
    },
    alipay(orderId) {
      let that = this
      Api.alipayWap({ orderId: orderId }).then(res => {
        that.alipayForm = res
        const alipayFormDiv = document.createElement('div')
        alipayFormDiv.innerHTML = that.alipayForm
        document.body.appendChild(alipayFormDiv)
        document.forms[0].submit()
      })
    },
    wxpay(orderId) {
      let that = this
      if (!that.userData.openid) {
        Api.getOpenIdByCode({ code: that.code }).then(res => {
          Utils.local('userData', res.data)
          that.userData = res.data
          if (res.code === 20000) {
            that.saveOrderByWx(orderId)
          } else {
            that.$vux.toast.show({
              text: '获取openId失败，请刷新页面重新请求',
              type: 'text',
              width: '80%'
            })
          }
        })
      } else {
        that.saveOrderByWx(orderId)
      }
    },
    saveOrderByWx(orderId) {
      let that = this
      Api.saveOrderByWx({ orderId: orderId }).then(res2 => {
        that.$wechat.config({
          'appId': res2.appid,
          'nonceStr': res2.nonce_str, // 支付签名随机串，不长于 32 位
          'package': 'prepay_id=' + res2.prepay_id, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
          'signature': res2.sign, // 支付签名
          'timestamp': res2.timestatm,
          'jsApiList': ['chooseWXPay']
        })
        that.$wechat.chooseWXPay({
          'appId': res2.appid,
          'timestamp': res2.timestatm, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
          'nonceStr': res2.nonce_str, // 支付签名随机串，不长于 32 位
          'package': 'prepay_id=' + res2.prepay_id, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
          'signType': 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
          'paySign': res2.sign2, // 支付签名
          success: function (res3) {
            console.log(res3)
            if (res3.err_msg === 'get_brand_wcpay_request:ok') {
              that.$router.push({ name: 'payState', query: { oid: orderId, type: 'ok' } })
            } else if (res3.err_msg === 'get_brand_wcpay_request:cancel') {
              that.$router.push({ name: 'payState', query: { oid: orderId, type: 'cancel' } })
            } else if (res3.err_msg === 'get_brand_wcpay_request:fail') {
              that.$router.push({ name: 'payState', query: { oid: orderId, type: 'fail' } })
            } else {
              that.$router.push({ name: 'payState', query: { oid: orderId, type: 'ok' } })
            }
          },
          error: function (re3Err) {
            console.log('re3Err', re3Err)
          }
        })
      })
    },
    wxpayH5(orderId) {
      Api.saveOrderByWxH5({ orderId: orderId }).then(res => {
        location.href = `${res.mweb_url}&redirect_url=https%3a%2f%2fmzy.86edu.net%2fpaystate%3foid%3d${orderId}`
      })
    },
    onBuyConfirm() {
      this.buyConfirmShow = false
    }
  }
}
</script>

<style lang="scss" scoped>
.pay-page {
  .g-title {
    font-size: 16px;
    color: #333;
    margin-bottom: 0.266667rem /* 10/37.5 */;
  }
  .g-tip {
    font-size: 14px;
    color: #fe4242;
    margin-bottom: 0.16rem /* 6/37.5 */;
  }
  .goods-wrap {
    padding: 0.266667rem 0.533333rem 0 /* 20/37.5 */;
    .goods-list {
      li {
        width: 8.933333rem /* 335/37.5 */;
        height: 2.08rem /* 78/37.5 */;
        background-color: #cccccc;
        border-radius: 8px;
        position: relative;
        margin-bottom: 0.533333rem /* 20/37.5 */;
        cursor: pointer;
        &.item199.active {
          background-image: linear-gradient(90deg, #0198ff 0%, #32d9fe 100%);
          .g-img {
            background-image: url("../../assets/images/vip99.png");
            width: 1.6rem /* 60/37.5 */;
            height: 0.853333rem /* 32/37.5 */;
            left: 0.133333rem /* 5/37.5 */;
          }
        }
        &.item116.active {
          background-image: linear-gradient(90deg, #0198ff 0%, #32d9fe 100%);
          .g-img {
            background-image: url("../../assets/images/vip1.png");
          }
        }
        &.item115.active {
          background-image: linear-gradient(90deg, #fd6a57 0%, #ff6dc5 100%);
          .g-img {
            background-image: url("../../assets/images/vip2.png");
          }
        }
        &.item114.active {
          background-image: linear-gradient(90deg, #fd6a59 0%, #ffa2bb 100%);
          .g-img {
            background-image: url("../../assets/images/vip2.png");
          }
        }
        &.item113 {
          .g-img {
            width: 0.853333rem /* 32/37.5 */;
            height: 0.96rem /* 36/37.5 */;
            top: 0.5rem /* 15/37.5 */;
            left: 0.366667rem /* 10/37.5 */;
            background-image: url("../../assets/images/vip5.png");
          }
        }
        &.item113.active {
          background-image: linear-gradient(90deg, #38c7bb 0%, #6ce6cb 100%);
          .g-img {
            background-image: url("../../assets/images/vip4.png");
          }
        }
        &.gray {
          background-image: none;
        }
        .g-img {
          width: 0.906667rem /* 34/37.5 */;
          height: 0.826667rem /* 31/37.5 */;
          position: absolute;
          top: 0.586667rem /* 22/37.5 */;
          left: 0.346667rem /* 13/37.5 */;
          background-image: url("../../assets/images/vip.png");
          background-size: cover;
          background-repeat: no-repeat;
        }
        .g-txt {
          font-size: 16px;
          color: #fefefe;
          position: absolute;
          top: 0.4rem /* 15/37.5 */;
          left: 1.866667rem /* 70/37.5 */;
        }
        .g-price {
          font-size: 16px;
          color: #fefefe;
          position: absolute;
          top: 1.173333rem /* 44/37.5 */;
          left: 1.866667rem /* 70/37.5 */;
        }
        .g-validity {
          margin-left: 0.533333rem /* 20/37.5 */;
          font-size: 14px;
        }
        .g-num {
          font-size: 50px;
          color: #fefefe;
          opacity: 0.3;
          position: absolute;
          right: 0.266667rem /* 10/37.5 */;
          top: 0.266667rem /* 10/37.5 */;
        }
        .g-state {
          position: absolute;
          right: -0.266667rem /* 10/37.5 */;
          bottom: -0.266667rem /* 10/37.5 */;
          &:before {
            font-size: 32px;
            color: #77ff53;
          }
        }
      }
    }
  }
  .payment-wrap {
    border-top: 0.266667rem /* 10/37.5 */ solid #f0f4f7;
    padding-top: 0.266667rem /* 20/37.5 */;
    .g-title {
      padding: 0 0.533333rem /* 20/37.5 */;
    }
    .payment-list {
      border-top: 1px solid #e4e4e4;
      li {
        padding: 0.266667rem /* 10/37.5 */;
        border-bottom: 1px solid #e4e4e4;
        text-align: center;
        .p-img {
          width: 0.773333rem /* 29/37.5 */;
          height: 0.773333rem /* 29/37.5 */;
          background-size: cover;
          background-repeat: no-repeat;
          vertical-align: middle;
          margin-right: 0.266667rem /* 10/37.5 */;
        }
        .p-txt {
          display: inline;
          font-size: 16px;
          color: #333;
          vertical-align: middle;
        }
        &:last-child {
          border-bottom: none;
        }
      }
    }
  }
}
.btn-next-group {
  margin: 0;
  .btn-gohome {
    margin: 0.533333rem /* 20/37.5 */ auto;
  }
}
.goods-quyi {
  border-bottom: 0.26667rem solid #f0f4f7;
  padding: 0.26667rem 0.53333rem 0.16rem /* 6/37.5 */;
  font-size: 14px;
  .g-title {
    font-size: 16px;
    margin-bottom: 10px;
    text-align: center;
  }
  p {
    margin-bottom: 0.16rem /* 6/37.5 */;
    span {
      color: #ff8600;
    }
  }
}
</style>

